<template>
  <div class="container-echart">
    <div :id="'echart' + timeId" class="interface-echart"></div>
  </div>
</template>
<script setup>
import * as echarts from "echarts";

import {
  onMounted,
  ref,
  reactive,
  markRaw,
  watch,
  onBeforeUnmount,
  nextTick,
} from "vue";

const props = defineProps({
  chdata: {
    // 柱形图x轴数据
    type: Array,
    default: function () {
      return ["1", "2", "3", "4", "5", "5", "5"];
    },
  },
  yDataArray: {
    //图标信息提示
    type: Array,
    default: function () {
      return [];
    },
  },
  cont: {
    type: String,
  },
});
let myEchart;
const timeId = ref(Math.floor(new Date().getTime() * Math.random())); // 使该图表保持唯id
const myEchartData = () => {
  const option = {
    color: ["#80FFA5", "#00DDFF", "#37A2FF", "#FF0087", "#FFBF00"],
    title: {
      text: "收益:" + props.cont,
      textStyle: {
        fontSize: 14, // 这里设置标题字体大小为20
      },
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "#6a7985",
        },
      },
    },
    // toolbox: {
    //   feature: {
    //     saveAsImage: {},
    //   },
    // },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        boundaryGap: false,
        data: zdata.xdata,
      },
    ],
    yAxis: [
      {
        type: "value",
      },
    ],
    series: [
      // {
      //   name: "Line 4",
      //   type: "line",
      //   stack: "Total",
      //   smooth: true,
      //   lineStyle: {
      //     width: 0,
      //   },
      //   showSymbol: false,
      //   areaStyle: {
      //     opacity: 0.8,
      //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      //       {
      //         offset: 0,
      //         color: "rgb(255, 0, 135)",
      //       },
      //       {
      //         offset: 1,
      //         color: "rgb(135, 0, 157)",
      //       },
      //     ]),
      //   },
      //   emphasis: {
      //     focus: "series",
      //   },
      //   data: [220, 402, 231, 134, 190, 230, 120],
      // },
      {
        name: "已订购",
        type: "line",
        stack: "Total",
        smooth: true,
        lineStyle: {
          width: 0,
        },
        showSymbol: false,
        label: {
          show: true,
          position: "top",
        },
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgb(255, 191, 0)",
            },
            {
              offset: 1,
              color: "rgb(224, 62, 76)",
            },
          ]),
        },
        // emphasis: {
        //   focus: "series",
        // },
        data: zdata.data,
      },
    ],
  };
  myEchart.setOption(option, {notMerge: true});
};
const zdata = reactive({
  data: [],
  xdata: [],
});
watch(
  //监控数据变化
  () => props.chdata,
  (r) => {
    zdata.data = r.map((item) => item.count);
    zdata.xdata = r.map((item) => item.dateStr);
    setTimeout(() => {
      myEchartData();
    }, 500);
  },
  {deep: true}
);
watch(
  //监控数据变化
  () => props.yDataArray,
  () => {
    setTimeout(() => {
      myEchartData();
    }, 500);
  },
  {deep: true}
);
onMounted(() => {
  setTimeout(() => {
    const dom = document.getElementById(`echart${timeId.value}`);
    myEchart = markRaw(echarts.init(dom));
    myEchartData();
  }, 500);

  // 当窗口发生变化时
  window.addEventListener("resize", () => {
    myEchart.resize();
  });
});
onBeforeUnmount(() => {
  window.removeEventListener("resize", () => {
    myEchart.resize();
  });
});
</script>
<style scoped lang="scss">
.container-echart {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.interface-echart {
  width: 100%;
  height: 250px;
}
</style>
